<div class="basic-live">
  
  <form class="left-main" [formGroup]="validateForm">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/one.svg" alt="">
      <span>基本信息</span>
    </div>
    

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true">用户编号</nz-form-label>
      <nz-form-control>
        <nz-select
          style="width: 260px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="选择用户编号"
          formControlName="usageCode"
          (ngModelChange)="onUsageCodeChange($event)"
          [nzLoading]="userCodeLoading"
        >
          <nz-option 
            *ngFor="let item of usageCodeInfo; let i = index" 
              [nzLabel]="item.usageCode" [nzValue]="item.usageCode">
          </nz-option>
        </nz-select>
        <app-err-msg *ngIf="validateForm.get('usageCode')?.dirty && validateForm.get('usageCode')?.invalid"
          errMsg="请选择用户编号"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">用户地址</nz-form-label>
      <nz-form-control>
        <input formControlName="userAddr" nz-input placeholder="用户地址" />
        <app-err-msg *ngIf="validateForm.get('userAddr')?.dirty && validateForm.get('userAddr')?.invalid"
          errMsg="用户地址不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">用户姓名</nz-form-label>
      <nz-form-control>
        <input formControlName="userName" nz-input placeholder="用户姓名" />
        
        <app-err-msg *ngIf="validateForm.get('userName')?.dirty && validateForm.get('userName')?.invalid"
          errMsg="校验失败"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">申请人电话</nz-form-label>
      <nz-form-control>
        <input formControlName="applyUserTel" nz-input placeholder="申请人电话" />
        <app-err-msg *ngIf="validateForm.get('applyUserTel')?.dirty && validateForm.get('applyUserTel')?.invalid"
          errMsg="请输入正确格式的申请人电话"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">申请人证件号</nz-form-label>
      <nz-form-control>
        <input formControlName="applyUserCerNum" nz-input placeholder="申请人证件号" />
        <app-err-msg *ngIf="validateForm.get('applyUserCerNum')?.dirty && validateForm.get('applyUserCerNum')?.invalid"
          errMsg="申请人证件号不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true">低保业务类型</nz-form-label>
      <nz-form-control>
        <nz-select
          style="width: 260px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="低保业务类型"
          formControlName="businessType"
          (ngModelChange)="onBasicLiveTypeChange($event)"
          [nzLoading]="basicLiveTypeLoading"
        >
          <nz-option 
            *ngFor="let item of basicLiveTypeList;"
            [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
        </nz-select>
        <app-err-msg *ngIf="validateForm.get('businessType')?.dirty && validateForm.get('businessType')?.invalid"
          errMsg="低保业务类型不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt" *ngIf="!cancelBasicLive">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">低保证件号</nz-form-label>
      <nz-form-control>
        <input formControlName="baseLivingCode" nz-input placeholder="低保证件号" />
        <app-err-msg *ngIf="validateForm.get('baseLivingCode')?.dirty && validateForm.get('baseLivingCode')?.invalid"
          errMsg="低保证件号不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>
    <div class="form-ipt" *ngIf="!cancelBasicLive">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">开始日期</nz-form-label>
      <nz-form-control>
        <nz-date-picker style="width: 260px;" formControlName="startDate" (ngModelChange)="onDatePickerChange($event, 'startDate')"></nz-date-picker>
        <app-err-msg *ngIf="validateForm.get('startDate')?.dirty && validateForm.get('startDate')?.invalid"
          errMsg="开始日期不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>
    <div class="form-ipt" *ngIf="!cancelBasicLive">
      <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">结束日期</nz-form-label>
      <nz-form-control>
        <nz-date-picker style="width: 260px;" formControlName="endDate" (ngModelChange)="onDatePickerChange($event, 'endDate')"></nz-date-picker>
        <app-err-msg *ngIf="validateForm.get('endDate')?.dirty && validateForm.get('endDate')?.invalid"
          errMsg="结束日期不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">申请原因</nz-form-label>
      <nz-form-control>
        <input formControlName="applyReason" nz-input placeholder="申请原因" />
        <!-- <app-err-msg *ngIf="validateForm.get('applyReason')?.dirty && validateForm.get('applyReason')?.invalid"
          errMsg="申请原因不能为空"
        ></app-err-msg> -->
      </nz-form-control>
    </div>
  </form>

  <form  *ngIf="!cancelBasicLive" class="left-main" style="margin-top: 20px;" [formGroup]="basicLiveForm">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/one.svg" alt="">
      <span>低保人信息</span>
    </div>
    <div class="form-ipt">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">低保人数</nz-form-label>
      <nz-form-control>
        <nz-input-number formControlName="personNum" (ngModelChange)="personNumChange($event)"  [nzMin]="0" [nzMax]="10" [nzStep]="1"></nz-input-number>
      </nz-form-control>
    </div>
    <div class="basic-live-info" style="width: 100%;" formGroupName="basicLiveInfo">
      <div style="display: flex;flex-wrap: wrap;justify-content: space-between;" *ngFor="let item of controlArray">
        <nz-divider nzOrientation="left" nzDashed [nzText]="text">
          <ng-template #text>低保人 {{ item.id + 1 }} <i *ngIf="!basicLiveId" (click)="removeBasicLiveInfo(item)" nz-icon nzType="minus-circle" nzTheme="outline" style="font-size: 16px; color: #02ADBC;cursor: pointer;"></i></ng-template>
        </nz-divider>
        <!-- <div style="display: flex;align-items: center;">
          <p style="font-size: 16px;font-weight: 600;margin: 0 12px;">低保人 {{ item.id + 1 }}</p>
          <i nz-icon nzType="minus-circle" nzTheme="outline" style="font-size: 16px; color: #02ADBC;"></i>
        </div> -->
        <div [ngClass]="{'form-ipt-width': control.type === 'upload'}" *ngFor="let control of item.controlNames">
          <div class="form-ipt" *ngIf="control.type !== 'upload'">
            <nz-form-label nzRequired [nzNoColon]="true" class="PingFangSC-Regular-14">{{ control.label }}</nz-form-label>
            <nz-form-control>
              <input *ngIf="control.type === 'input'" [formControlName]="control.controlName" nz-input placeholder="" />
              <nz-date-picker style="width: 260px;" *ngIf="control.type === 'date'" [formControlName]="control.controlName" (ngModelChange)="onDatePickerChange($event, control.controlName)"></nz-date-picker>
              
              <app-err-msg *ngIf="basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.dirty && basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.invalid"
                [errMsg]="control.label + '不能为空'"
              ></app-err-msg>
            </nz-form-control>
          </div>
          <div *ngIf="control.type === 'upload'">
            <app-file-upload style="width: 100%;"
              (uploadBack)="uploadBack($event, control.controlName)" 
              [title]="'身份证明文件'"
              subTitle="请上传png,jpg,gif,jpeg,pdf,bmp格式的图片,最多可上传5张,每张图片大小不超过10M"
              [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
              [required]="'true'"
              [previewIdStr]="basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.value"
              [uploadAvailable]="formAvailable"
              [deleteAvailable]="formAvailable"
            >
            </app-file-upload>
            <app-err-msg *ngIf="basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.dirty && basicLiveForm.get('basicLiveInfo')?.get(control.controlName)?.invalid"
              [errMsg]="control.label + '不能为空'"
            ></app-err-msg>
          </div>
          
        </div>
        
        
      </div>
    </div>
  </form>

  <div class="left-upload">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/four.svg" alt="">
      <span>资料上传</span>
    </div>

    <app-file-upload 
      (uploadBack)="uploadBack($event, 'file1')" 
      [title]="'身份证明文件'"
      subTitle="请上传png, jpg, gif, jpeg, pdf, bmp格式的图片, 最多可上传 2 张,每张图片大小不超过 10 M"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [required]="'true'"
      [previewIdStr]="validateForm.get('file1')?.value"
      [uploadAvailable]="formAvailable"
      [deleteAvailable]="formAvailable"
      [fileNum]="2"
    >
    <!-- (cardIdVerifyBtnBack)="cardIdVerifyBtnBack($event, 'file1', 'applyUserCerNum')" -->
    </app-file-upload> <br>

    <app-file-upload 
      (uploadBack)="uploadBack($event, 'file2')" 
      [title]="'租赁合同'"
      subTitle="请上传png, jpg, gif, jpeg, pdf, bmp格式的图片, 最多可上传 5 张,每张图片大小不超过 10 M"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [previewIdStr]="validateForm.get('file2')?.value"
      [uploadAvailable]="formAvailable"
      [deleteAvailable]="formAvailable"
      [fileNum]="5"
    >
    </app-file-upload> <br>

    <app-file-upload 
      (uploadBack)="uploadBack($event, 'file3')" 
      [title]="'低保三证之一'"
      subTitle="《特困人员救助供养证》、《广州市城乡居民最低生活保障证》或《广州市低收入困难家庭证》原件 (请上传png, jpg, gif, jpeg, pdf, bmp格式的图片, 最多可上传 5 张,每张图片大小不超过 10 M)"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [required]="!cancelBasicLive ? 'true' : 'false'"
      [previewIdStr]="validateForm.get('file3')?.value"
      [uploadAvailable]="formAvailable"
      [deleteAvailable]="formAvailable"
      [fileNum]="5"
    >
    </app-file-upload> <br>

    <!-- <app-file-upload 
      (uploadBack)="uploadBack($event, 'houseHold')" 
      [title]="'户口簿附件'"
      subTitle="请上传png, jpg, gif, jpeg, pdf, bmp格式的图片, 最多可上传 5 张,每张图片大小不超过 10 M"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [previewIdStr]="validateForm.get('houseHold')?.value"
      [uploadAvailable]="formAvailable"
      [deleteAvailable]="formAvailable"
      [fileNum]="5"
    >
    </app-file-upload> <br>

    <app-file-upload 
      (uploadBack)="uploadBack($event, 'waterPic')" 
      [title]="'租赁合同'"
      subTitle="请上传png, jpg, gif, jpeg, pdf, bmp格式的图片, 最多可上传 5 张,每张图片大小不超过 10 M"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [previewIdStr]="validateForm.get('waterPic')?.value"
      [uploadAvailable]="formAvailable"
      [deleteAvailable]="formAvailable"
      [fileNum]="5"
    >
    </app-file-upload> -->
  </div>

  <div class="left-btn" style="margin-bottom: 20px;">
    <div class="notPreview" *ngIf="formAvailable">
      <button [nzLoading]="btnLoading" [disabled]="disableBtn" type="button" nz-button nzType="default" (click)=onReset()>取消</button>
      <button [nzLoading]="btnLoading" [disabled]="disableBtn" type="button" nz-button nzType="primary" (click)="onSubmit()">提交</button>
    </div>

    <div class="preview" *ngIf="!formAvailable">
      <button nz-button (click)="doBack()">返回</button>
    </div>
  </div>
</div>
